import { Row, Col, Table, Button } from 'antd';
import {connect } from 'dva';
// import styles from './Show.less';
import ReactEcharts from 'echarts-for-react';
import echarts from 'echarts';
import Pie from './Pie';
import Bar from './Bar';
import Line from './Line';
import Query from './Query';


function Integral ({data}) {
  const { integral, } = data;

//在设置固定列时，若列头与内容不对齐或出现列重复，请指定列的宽度 width.
//建议指定 scroll.x 为大于表格宽度的固定值或百分比。注意，且非固定列宽度之和不要超过 scroll.x。
//可以不设置最后一列的宽来解决列宽之和与scroll.x不匹配而出现的不对齐问题。
  const columns = [
    {
      title:'区域',
      dataIndex:'area',
      key:'area',
      fixed:'left',
      width:60,
      render: (text) => {
        let value;
        if(text===1) {
          value= '事业部'
        }
        if (text===2){
          value= '华东区'
        }
        if(text===3){
          value= '华南区'
        }
        if(text===4){
          value= '华北区'
        }
        return<span>{value}</span>
      },
    }, {
      title:'公司',
      dataIndex:'company',
      key:'company',
      fixed:'left',
      width:110,
    }, {
      title:'计划产值完成率',
      dataIndex:'planProduction',
      key:'planProduction',
      width:110,
    }, {
      title:'人均营收',
      dataIndex:'averageRevenue',
      key:'averageRevenue',
      width:70,
    }, {
      title:'计划利润完成率',
      dataIndex:'planProfits',
      key:'planProfits',
      width:110,
    }, {
      title:'人均利润',
      dataIndex:'perCapitaProfit',
      key:'perCapitaProfit',
      width:70,
    }, {
      title:'计划成本完成比',
      dataIndex:'plannedCost',
      key:'plannedCost',
      width:110,
    }, {
      title:'人均成本',
      dataIndex:'perCapitaCost',
      key:'perCapitaCost',
      width:70,
    }, {
      title:'增减员',
      dataIndex:'workersIncrease',
      key:'workersIncrease',
      width:60,
    }, {
      title:'人均客服量',
      dataIndex:'perCustomerService',
      key:'perCustomerService',
      width:100,
    }, {
      title:'实际到款率',
      dataIndex:'actualPaymentRate',
      key:'actualPaymentRate',
      width:100,
    }, {
      title:'应收账款占营收比',
      dataIndex:'receivableAccount',
      key:'receivableAccount',
      width:140,
    }, {
      title:'质控分',
      dataIndex:'qualityControlPoints',
      key:'qualityControlPoints',
      width:60,
    }, {
      title:'撤单数',
      dataIndex:'fromSingular',
      key:'fromSingular',
      width:60,
    }, {
      title:'签单量',
      dataIndex:'signBillAmount',
      key:'signBillAmount',
      width:60,
    }, {
      title:'网站推广',
      dataIndex:'websitePromotion',
      key:'websitePromotion',
      width:70,
    }, {
      title:'积分累计',
      dataIndex:'integralAccumulated',
      key:'integralAccumulated',
      width:70,
    }, {
      title:'累计排名',
      dataIndex:'accumulativeRankings',
      key:'accumulativeRankings',
    },
  ]

  // const xLabel = ['一', '二', '三', '四', '五', '六', '七', '八', '九']
  // const value = [1, 2, 4, 8, 16, 32, 64, 128, 256]
  // const title = '对数轴示例'
  // const name = '数据名称'
  // const line = {xLabel,value,title,name}
  return (
    <div >
      <Query onOk={{}}/>
      <div style={{height: '70vh'}}>
        <Row>
          <Col span={12}>
            <Bar data={integral}/>
          </Col>
        </Row>

      </div>

      <Table
        columns={columns}
        dataSource={integral}
        rowKey={record => record.id}
        scroll={{x:1510,y:'calc(100vh - 120px)'}}
        size={'small'}
        pagination={false}
        // pagination={{
        //   // showSizeChanger: true,
        //   showQuickJumper: true,
        //   showTotal: total => `共 ${total} 条`,
        //   // pageSizeOptions:['5','10','15','20'],
        //   defaultPageSize:5,
        // }}

      />
    </div>
  )
}

export default connect(({data})=>({data}))(Integral);
